<!--
 * @Author: wfl
 * @LastEditors: wfl
 * @description: 全局搜索表单
 * @updateInfo:
 * @Date: 2022-11-01 15:00:54
 * @LastEditTime: 2022-11-01 20:36:51
-->
<script lang="ts" setup name="IkSearch">
import { Refresh, Search } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
import type { PropType, Ref } from 'vue'

const props = defineProps({
  enter: {
    type: Boolean,
    default: true
  },
  // 最小占用栅格数
  minSpan: {
    type: Number,
    default: 6
  },
  // inline
  inline: {
    type: Boolean,
    default: true
  },
  // 表单model
  model: {
    type: Object,
    default: () => { }
  },
  // 表单ref
  formRef: {
    type: Object as PropType<Ref<any> | null>,
    default: null
  },
  // label宽度
  labelWidth: {
    type: Number,
    default: 100
  },
  statusIcon: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  // card 阴影
  shadow: {
    type: String as PropType<'always' | 'never' | 'hover'>,
    default: 'never'
  },
  showSearch: {
    type: Boolean,
    default: true
  }
})

// emit事件
const emits = defineEmits<{
  (event: 'refresh'): void
  (event: 'search'): void
  (event: 'update:formRef', value: Ref<any>): void
}>()

// slot数量
const soltLen = computed(() => Object.keys(useSlots()).length || 0)
const fixSpan = computed(() => {
  const { minSpan } = props

  return soltLen.value < 4 ? minSpan > 8 ? minSpan : minSpan > 6 ? minSpan : 6 : minSpan
})

// ref 重置
const _formRef: Ref<null | FormInstance> = ref(null)
const handRefresh = () => {
  try {
    _formRef.value?.resetFields()
    emits('refresh')
    emits('search')
  }
  catch (error) { }
}

//
</script>

<template>
  <el-card class="gl-search-card" :class="{ noBody: !Object.keys($slots).length }" :shadow="shadow">
    <template v-if="title" #header>
      <h2>{{ title }}</h2>
    </template>

    <template #default>
      <el-form
        ref="_formRef"
        :inline="inline"
        :model="model"
        :status-icon="statusIcon"
        :label-width="`${labelWidth}px`"
        class="auto-search-form"
        @keydown.enter.prevent="emits('search')"
      >
        <el-row>
          <el-col
            v-for="i in soltLen"
            :key="i"
            :xl="{ span: fixSpan }"
            :lg="{ span: fixSpan + 2 }"
            :md="{ span: 12 }"
          >
            <div class="last-with-btn">
              <slot :name="`f${i}`"></slot>
              <template v-if="i === soltLen">
                <el-button
                  v-if="showSearch"
                  type="primary"
                  class="icon-more el-icon ml"
                  title="查询"
                  :icon="Search"
                  @click="emits('search')"
                />
                <el-button
                  :icon="Refresh"
                  class="icon-more el-icon ml"
                  title="重置"
                  @click="handRefresh"
                />
              </template>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </template>
  </el-card>
</template>

<style lang="scss">
.gl-search-card {
  border-radius: 0 0 4px 4px;
  border: none;

  .el-card__body {
    display: flex;
    padding: 0;

    .el-input-group__append, .el-input-group__prepend{
      padding: 0;
    }

    .auto-search-form {
      flex: 1;

      & > .el-row{
        width: calc(100% - 82px);
      }
    }

    .last-form {
      display: flex;
      // width: calc(100% + 126px);
      position: absolute;
      right: -90px;

      .el-form-item {
        flex: 1;
      }
    }
  }

  :deep(.el-card__header) {
    border-bottom: none;

    h2 {
      font-weight: 600;
    }
  }

  &.noBody {
    :deep(.el-card__body) {
      padding: 0;
    }
  }

  .last-with-btn {
    display: flex;

    :deep(.el-form-item) {
      margin-right: 0;
    }
  }

  .el-form {
    flex: 1;
  }

  :deep(.el-row) .el-form-item {
    width: calc(100% - 32px);
  }

  :deep(.el-form--inline) .el-form-item {
    .el-form-item__content>div {
      width: 100%;
    }
  }
}
</style>
